<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看尺寸</title>
    <style>
        .c1,.c2{
            height: 100px;
            width: 80px;
            background-color: #10fcff;
        }
        .outer{
            position: absolute;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="c1"></div>
</div>
<div class="c2"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>
  console.log($('.c1').offset().top);
  console.log($('.c1').offset().left);
  console.log("888888888888888");
  console.log("**************");
  console.log($('.c2').position().top);
  console.log($('.c1').position().left);
console.log($('.c1').width());
console.log($('.c1').height());
console.log($('.c1').innerWidth());
$(".c1").css("padding","20px");
console.log($('.c1').innerWidth());
console.log($('.c1').innerHeight());
console.log('-----------');
$('.c1').css("margin",'20px');
console.log($('.c1').innerHeight());
 console.log($(".c1").outerHeight());//140(自己的高度+padding(内边距)
    $(".c1").css("border","10px solid yellow");//120(自己的高度+padding(内边距)
    console.log("000000000000000")
    console.log($('.c1').innerHeight());
 console.log($(".c1").outerHeight());//160(自己的高度+padding(内边距)+border的宽度

</script>

</body>
</html>